<!-- 商品详情 -->

<template>
	<uni-nav-bar color="#000" :fixed="true" background-color="#fff" status-bar left-icon="left" title="商品详情" @clickLeft="back" />
	<view class="ticket">
		<image :src="state.shopDetail.cover_img" mode="widthFix"></image>
	</view>
	
	<!-- 门票详情 -->
	<view class="detail">
		<view class="header">¥{{state.shopDetail.price}}</view>
		<view class="title">
			<view class="name">{{state.shopDetail.name}}</view>
			<view class="share" @click="share()">分享</view>
		</view>
		<view class="time">
			<text>{{state.shopDetail.update_time}}</text>
			<text style="color: #7B7973">运费：包邮</text>
		</view>
	</view>
	
	<!-- 须知 -->
	<view class="must">
		<nut-tabs v-model="state.tab" :auto-height="true">
			<nut-tab-pane title="详情" pane-key="0">
				<view class="wrap">
					<view class="desc">
						<rich-text :nodes="state.shopDetail.content"></rich-text>
					</view>
				</view>
			</nut-tab-pane>
			<nut-tab-pane title="推荐" pane-key="1">
				<view class="wrap">
					<view class="desc">
						<view class="desc-item" v-for="(item, index) in state.recomData" :key="index" @click="toShopDetail(item)">
							<image :src="item.cover_img"></image>
							<view class="name">{{item.name}}</view>
							<view class="price">￥ {{item.price}}</view>
						</view>
					</view>
				</view>
			</nut-tab-pane>
		</nut-tabs>
	</view>
	
	<!-- 底部工具 -->
	<view class="bottom-btn">
		<view class="cart" style="margin-right: 28rpx"  @click="goCart()">
			<image src="../../static/index/购物车@2x.png" mode=""></image>
		</view>
		<view class="cart" style="margin-right: 28rpx">
			<button type="default" open-type="contact">
				<image src="../../static/index/客服@2x.png" mode=""></image>
			</button>
		</view>
		<view class="cart" style="margin-right: 28rpx" @click="collect()">
			<image src="../../static/index/收藏夹@2x.png" mode=""></image>
		</view>
		
		<!-- 按钮 -->
		<view class="btn">
			<view class="btn-item-one" @click="shop(0)">加入购物车</view>
			<view class="btn-item-two active" @click="shop(1)">立即购买</view>
		</view>
	</view>
	
	<!-- 底部分享弹出 -->
	<nut-popup position="bottom" teleport="#app" teleport-disable closeable round  v-model:visible="showTeleport" >
		<view class="bottom">
			<view class="wxchat">
				<button class="shareBtn" data-name="shareBtn" open-type="share"> 
					<image src="../../static/images/wxchat.png" mode=""></image>好友
				</button>
			</view>
			<view class="code" @click="sharepic">
				<image src="../../static/images/code.png" mode=""></image>微信好友
			</view>
		</view>
		<view class="btn" style="margin-bottom: 40rpx;" @click="share()">取消</view>
	</nut-popup>
	
	<!-- 底部购物车弹出 -->
	<view class="popshop">
		<nut-popup position="bottom" teleport="#app" teleport-disable closeable round  v-model:visible="showShop" >
			<view class="bottom-detail">
				<image :src="state.shopDetail.cover_img"></image>
				<view class="title">{{state.shopDetail.name}}</view>
				<view class="price">¥{{state.shopDetail.price}}</view>
				<view class="tip">现货顺丰包邮（拍下5天内发货）</view>
				<view class="desc">此处放说明字最多两排。如无，此处不显示文字且其他所有字图比例均不变（除适配等不可逆因素）</view>
				<!-- 选购规格 -->
				<view class="specification">
					<view class="type">
						<view class="tab" v-for="(item, index) in state.popData" :key="index">
							<nut-button
								:color="state.popupIndex == item.ind? '#000000' : ''"
								@click="changeType(item, index)">
								{{item.name}}
							</nut-button>
						</view>
					</view>
					<view class="type" style="margin-top: 32rpx; display: flex; justify-content: center;">
						<view style="display: flex; justify-content: center;">
							<view class="title" style="margin-top: 10rpx; margin-right: 10rpx;">数量</view>
							<view class="tab">
								  <nut-input-number v-model="state.total" />
							</view>
						</view>
					</view>
				</view>
				<view class="btn" @click="addshop()">确定</view>
			</view>
		</nut-popup>
	</view>
	
	<!-- 海报弹窗 -->
	<view class="haibao">
		<nut-popup teleport="#app" teleport-disable v-model:visible="showShare" >
			<image :show-menu-by-longpress='true' class="shareImg" :src="shareImg" v-if="shareImg" style="width: 750rpx;height: 1200rpx;"></image>
		</nut-popup>
	</view>
	
	<poster ref="posters" :list="state.list" background-color="#FFF" :width="750" :height="1200" @on-success="posterSuccess" @on-error="posterError"></poster>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, nextTick } from "vue";
import { goodsList, goodsInfo, addCollect } from '@/request/api/shop';
import { useCartStore } from '@/store/cart.js';
import Poster from '@/components/zhangyuhao-poster/Poster.vue';


const store = useCartStore();

const id = ref(null);
const value = ref(1);
const showTeleport = ref(false);
const showShare = ref(false);  // 海报弹窗
const showShop = ref(false);

const buyType = ref(null);  // 0 购物车  1 购买

const shareImg = ref('');
const posters = ref(null);

const state = reactive({
	shopDetail: {},
	tab1value: '',
	popupIndex: 0,
	tab: 0,
	total: 1,
	popData: [],
	
	list: [{
			type: 'image',
			// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
			path: 'https://img.agrimedia.cn/storage/bmdc/20230501/4c31c9091df8715dc3354ec78fea6c9cb3d90f50.jpeg?imageView/1/w/400/h/400',
			x: 0,
			y: 0,
			width: 700,
			height: 1200
		},
		{
			type: 'image',
			// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
			path: 'https://img.agrimedia.cn/storage/bmdc/20230501/4c31c9091df8715dc3354ec78fea6c9cb3d90f50.jpeg?imageView/1/w/400/h/400',
			x: 530,
			y: 1050,
			width: 100,
			height: 100
		},
		{
			type: 'textarea',
			width: 700,
			height: 150,
			x: 30,
			y: 1050,
			text: '1.保存图片到相册',
			size: 30,
			color: '#fff'
		},
		{
			type: 'textarea',
			width: 700,
			height: 150,
			x: 30,
			y: 1100,
			text: '2.打开微信扫码可见',
			size: 30,
			color: '#fff'
		},
		{
			type: 'textarea',
			width: 700,
			height: 150,
			x: 30,
			y: 1150,
			text: '2.打开微信扫码可见',
			size: 30,
			color: '#fff'
		}
	],
	
	recomData: []  // 推荐商品
})

onLoad((e) => {
	id.value = e.id;
	getDetailData()
})

// 商品详情
const getDetailData = async () => {
	let paramas = { id: id.value }
	const resultData = await goodsInfo(paramas);
	state.shopDetail = resultData.data;
	
	// 规格转换
	state.popData = state.shopDetail.sku.split(",").map((item, ind) => {
		const [name, price, index] = item.split("-");
		return { name, price: parseInt(price), ind };
	});
	
	state.list[0].path = state.shopDetail.img[0];
	
	// 商品列表
	const recommend = await goodsList();
	state.recomData = recommend.data.list.splice(0, 6);
}

// 购物车
const goCart = () => {
	uni.navigateTo({
		url: '/pages/index/cart'
	})
}

// 收藏商品
const collect = async() => {
	try {
		let paramas = { goods_id: state.shopDetail.id, title:  state.shopDetail.name, cover_img: state.shopDetail.cover_img }
		const resultData = await addCollect(paramas);
		if (resultData.code === 200) {
			uni.showToast({ title: resultData.msg, icon: 'none' });
		};
	} catch (e) { }
}

// 推荐商品
const toShopDetail = (item) => {
	uni.navigateTo({
		url: `/pages/shop/shopdetail?id=${item.id}`
	})
}

// 海报
const sharepic = async() => {
	await nextTick(() => {
		uni.showLoading({
			mask: true,
			title: "生成海报中..."
		})
		posters.value.create();
	})
}

// 海报生成成功
const posterSuccess = (e) => {
	uni.hideLoading({});
	showShare.value = true;
	shareImg.value = e;
	showTeleport.value = false;
}

// 错误
const posterError = (e) => {
	console.log(e)
}

// 分享
const share = () => {
	showTeleport.value = !showTeleport.value;
	console.log('123')
}

// 打开选择规格, 0 购物车  1 下单
const shop = (index) => {
	buyType.value = index;
	showShop.value = !showTeleport.value;
}

// 0 添加购物车  1 下单
const addshop = () => {
	state.shopDetail.size = state.popData[state.popupIndex];
	state.shopDetail.total = state.total;  // 购买数量
	state.shopDetail.allprice = state.total;
	showShop.value = false;
	if (store.token) {
		if(buyType.value == 0) {
			store.addGoods(state.shopDetail);
		} else {
			// 直接去下单页
			uni.navigateTo({
				url: `/pages/shop/shoporder?data=${JSON.stringify(state.shopDetail)}&type=1`
			})
		}
	} else {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
}

// 选择规格
const changeType = (item, index) => {
	state.popupIndex = index;
}

const back = () => {
	uni.switchTab({
		url: '/pages/shop/shop'
	})
}

// 1.发送给朋友
const onShareAppMessage = (res) => {
	return {
		title: 123,
		path: this.share.path,
		imageUrl: this.share.imageUrl
	}
}
</script>

<style lang="scss" scoped>
	.ticket {
		width: 100%;
		text-align: center;
		image {
			width: 100%;
		}
	}
	.detail {
		border-bottom: 4rpx solid #DDD8D3;
		padding: 40rpx 36rpx 14rpx 36rpx;
		box-sizing: border-box;
		.header {
			font-size: 46rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 60rpx;
		}
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 14rpx;
			.name {
				font-size: 34rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 60rpx;
			}
			.price {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 24rpx;
				
			}
			.share {
				width: 97rpx;
				height: 44rpx;
				background: #000000;
				border-radius: 46rpx;
				font-size: 20rpx;
				color: #fff;
				line-height: 44rpx;
				text-align: center;
			}
		}
		.time, .address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 24rpx;
			margin-bottom: 20rpx;
		}
	}
	.must {
		::v-deep .nut-tabs__titles {
			border-bottom: 4rpx solid #DDD8D3;
		}
		.wrap {
			padding: 36rpx 44rpx 200rpx 40rpx;
			box-sizing: border-box;
			.title {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1C1919;
				line-height: 24rpx;
				text-align: center;		
				margin-bottom: 34rpx;
			}
			.desc {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item {
					width: 100%;
					margin-bottom: 10rpx;
					.circle {
						line-height: 40rpx;
						display: inline-block;
						margin-right: 14rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #000;
					}
				}
				.desc-item {
					width: 30%;
					margin-bottom: 40rpx;
					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
					}
					.name {
						color: #D20015;
						width: 200rpx;
						padding: 0rpx 10rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2; 
					}
					.price {
						color: #000;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
	.bottom-btn {
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		z-index: 99;
		width: 100%;
		padding: 38rpx 34rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		.cart {
			image {
				width: 62rpx;
				height: 48rpx;
			}
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #000;
			.btn-item-one {
				width: 50%;
				height: 92rpx;
				line-height: 92rpx;
				background: #FFFFFF;
				border-radius: 46rpx 0rpx 0rpx 46rpx;
				border: 2rpx solid #000000;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				box-sizing: border-box;
			}
			.btn-item-two {
				width: 50%;
				height: 92rpx;
				line-height: 92rpx;
				background: #FFFFFF;
				border-radius: 0rpx 46rpx 46rpx 0rpx;
				border: 2rpx solid #000000;
				border-left: 0rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				box-sizing: border-box;
			}
			.active {
				border: 2rpx solid #000000;
				background-color: #000000;
				color: #fff;
			}
		}
	}
	
	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 56rpx;
		box-sizing: border-box;
		.wxchat, .code {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			image {
				width: 140rpx;
				height: 140rpx;
			}
			text-align: cell;
		}
	}
	.btn {
		margin: 0 auto;
		width: 90%;
		text-align: center;
		color: #fff;
		line-height: 92rpx;
		height: 92rpx;
		background: #000000;
		border-radius: 46rpx;
	}
	
	.bottom-detail {
		padding: 100rpx 56rpx 62rpx 56rpx;
		box-sizing: border-box;
		position: relative;
		::v-deep .nut-button--normal {
			width: 154rpx;
			height: 52rpx;
			font-size: 26rpx !important;
		}
		image {
			position: absolute;
			top: -100rpx;
			z-index: 9999;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			width: 184rpx;
			height: 184rpx;
			border-radius: 50%;
		}
		.title {
			text-align: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 60rpx;
		}
		.price {
			text-align: center;
			font-size: 46rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 60rpx;
			margin-bottom: 10rpx;
		}
		.tip {
			text-align: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 24rpx;
			margin-bottom: 22rpx;
		}
		.btn {
			width: 100%;
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}
		.specification {
			padding: 24rpx 10rpx;
			box-sizing: border-box;
			v-deep .nut-button--normal {
				padding: 0rpx !important;
			}

			.type {
				display: flex;
				align-items: center;
				.title {
					text-align: left;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1C1919;
					line-height: 24rpx;
				}
				.name {
					width: 220rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1C1919;
					line-height: 24rpx;
				}
				.tab {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					margin-left: 36rpx;
				}
				.price {
					width: 154rpx;
					text-align: center;
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
			
			.number {
				.name {
					width: 120rpx;
				}
			}
			
			.tip {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
	
	.popshop {
		::v-deep .nut-popup {
			overflow-y: inherit !important;
		}
	}
	
	
	
	.shareBtn {
		background-color: transparent !important;
		border: transparent !important;
		padding: none !important;
		text-align: center !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	::v-deep button {
		margin: 0 !important;
		background-color: transparent !important;
		border: 1rpx solid transparent;
		font-size: 24rpx !important;
		font-weight: 400 !important;
		padding: 0rpx !important;
		display: flex;
		align-items: center;
	}
	::v-deep button::after { 
	    border: none
	}
	
	.haibao ::v-deep .nut-popup {
		background-color: transparent !important;
	}
</style>
